<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			
			#head{
				width: 100%;
				height: 56px;
				background: #ffe300;
			}
			#head_main{
				width: 90%;
				height: 56px;
				/* background:paleturquoise; */
				margin: auto;
				min-width: 1400px;
			}
			#head_log{
				float: left;
				height: 56px;
			}
			#head_log>a{
				line-height: 56px;
			}
			#head_log>a>img{
				width: 120px;
			}
			#head_nav{
				height: 56px;
				float: left;
				margin-left: 200px;
			}
			#head_nav>ul{
				height: 56px;
			}
			#head_nav>ul>li{
				list-style: none;
				line-height: 56px;
				padding: 0px 24px;
				float: left;
				position: relative;
			}
			#head_nav>ul>li:hover{
				background: #000000;
				color: #ffe300;
			}
			#head_nav>ul>li:hover>a{
				color: #ffe300;
			}
			#head_nav>ul>li>a{
				font-size: 14px;
				text-decoration: none;
				color: #000000;
			}
			.down{
				width: 150px;
				position: absolute;
				margin-top: 0px;
				left: 0;
				z-index: 2;
				display: none;
				background: white;
			}
			.down>a{
				display: block;
				line-height: 40px;
				color: #000000;
				padding-left: 30px;
				text-decoration: none;
				
			}
			.down>a:hover{
				background: #ffe300;
			}
			.down2{
				width: 130px;
				position: absolute;
				top: 60px;
				right: 250px;
				z-index: 2;
				display: none;
				background: white;
			}
			.down2>a{
				display: block;
				line-height: 40px;
				color: #000000;
				text-align: left;
				padding-left: 20px;
				text-decoration: none;
				
			}
			.down2>a:hover{
				background: #ffe300;
			}
			#upload:hover>.down2{
				display: block;
			}
			#head_nav>ul>li:hover>.down{
				display: block;
			}
			#vip{
				position: absolute;
				margin-top: 5px;
				margin-left: -10px;
			}
			.poin{
				position: absolute;
				margin-top: 20px;
				margin-left: 0px;
				width: 8px;
				height: 8px;
				border-radius: 50%;
				background: red;
			}
			#search{
				float: left;
				height: 56px;
				width: 60px;
				margin-left: 100px;
				text-align: center;
				/* background: palegoldenrod; */
			}
			#search:hover{
				background: #000000;
			}
			#search>a{
				line-height: 56px;
			}
			#search>a>img{
				width: 22px;
				height: 22px;
				margin-top: 20px;
			}
			#upload{
				float: left;
				height: 56px;
				width: 60px;
				text-align: center;
				/* background: pink; */
			}
			#upload:hover{
				background: #000000;
			}
			#upload>a{
				line-height: 56px;
			}
			#upload>a>img{
				width: 22px;
				height: 22px;
				margin-top: 20px;
			}
			#login{
				height: 56px;
				float: left;
				/* background: palegreen; */
			}
			#login>ul{
				width: 150px;
			}
			#login:hover{
				background: #000000;
			}
			#login:hover>ul>li>a{
				color: #ffe300;
				
			}
			#login>ul>li{
				list-style: none;
				float: left;
				line-height: 56px;
				padding: 0px 10px;
			}
			#login>ul>li:hover>a{
				color: #ffe300;
				font-weight: 600;
			}
			#login>ul>li>a{
				text-decoration: none;
				color: #000000;
			}

			#show{
				width: 1150px;
				height: 286px;
				margin:20px auto 0px auto ;
				overflow: hidden;
				border-radius: 5px;
				background: palegreen;
				position: relative;
			}
			#show>ul{
				width: 5750px;
			}
			#show>ul>li{
				width: 1150px;
				height: 286px;
				float: left;
				list-style: none;
			}
			#show>ul>li>img{
				width: 100%;
				height: 100%;
			}
			#show>span{
				width: 50px;
			    height: 50px;
				color: white;
			    font-size: 30px;
				line-height: 50px;
			    text-align: center;
			    top: 146px;
				 border-radius:50%;
				background-color: rgba(168, 168, 168, 0.4);
			}
			#left{
			    position: absolute;
			    left: 0px;
			}
			#right{
			    position: absolute;
			    right: 0px;
			}
			#show>span:hover{
				background-color: rgba(168, 168, 168, 1);
				color: #ffe300;
			}
			#body1_img{
				width: 1150px;
				height: 168px;
				margin: 20px auto;
				/* background: paleturquoise; */
			}
			#body1_img>ul>li{
				width: 210px;
				height: 168px;
				float: left;
				list-style: none;
				border-radius: 5px;
				overflow: hidden;
			}
			.body1_img{
				margin-left: 25px;
			}
			#body1_img>ul>li>a>img{
				width: 210px;
				height: 168px;
			}
			#body_nav{
				width: 380px;
				height: 56px;
				margin: auto;
				text-align: center;
			}
			#body_nav>ul>li{
				list-style: none;
			    float: left;
				padding: 0px 30px;
			}
			#body_nav>ul>li>a{
				line-height: 56px;
				text-decoration: none;
				color: #000000;
			}
			#main{
				width: 100%;
				background: rgb(244,244,244);
				height: 1520px;
				z-index: 1;
			}
			#main_img{
				width: 1150px;
				height: 168px;
				margin: 20px auto;
			}
			#main_img>ul>li{
				width: 210px;
				height: 320px;
				float: left;
				list-style: none;
				border-radius: 5px;
				overflow: hidden;
				margin-top: 20px;
				background-color: white;
			}
			.main_img{
				margin-left: 25px;
			}
			
			#main_img>ul>li>a>img{
				width: 210px;
				height: 168px;
			}
			#main_img>ul>li>a:hover>img{
				opacity: 0.7;
			}
			.p1{
				text-decoration: none;
				color: #000000;
				font-size: 14px;
				text-align: center;
			}
			.p2{
				color: #B0B0B0;
				font-size: 12px;
				margin-left: 10px;
			}
			.count1{
				width: 250px;
				text-align: center;
				
			}
			.count1>li{
				list-style: none;
				float: left;
				color: #B0B0B0;
				font-size: 12px;
				height: 12px;
				width: 50px;
				margin-left: 10px;
				margin-top: 20px;
				/* background-color: palegreen; */
			}
			.count1>li>img{
				width: 16px;
				float: left;
			}
			.count1>li>p{
				float: left;
			}
			.icon{
				width: 210px;
				height: 30px;
				margin-top: 65px;
				
				/* background: palegoldenrod; */
				position: relative;
				border-top: 1px solid #999999;
			}
			.icon>a>img{
				width: 24px;
				height: 24px;
				border-radius: 50%;
				margin-top: 5px;
				margin-left: 10px;
			}
			
			.left{
				text-decoration: none;
				color: #000000;
				font-size: 12px;
				top: 5px;
				position: absolute;
				margin-top: 5px;
				margin-left: 10px;
			}
			.left:hover{
				color: red;
			}
			.right{
				color: #B0B0B0;
				font-size: 12px;
				margin-left: 124px;
				position: absolute;
				margin-top: 10px;
			}
			#yema{
				width: 810px;
				margin: auto;
				/* background: paleturquoise; */
			}
			#yema>ul{
				margin-top: 900px;
				height: 40px;
			}
			#yema>ul>li{
				list-style: none;
				float: left;
				border: 1px solid #DCDCDC;
				border-radius: 5px;
				padding: 0px 20px;
				margin: 0px 10px;
				background: white;
			}
			#yema>ul>li:hover{
				background: #ffe300;
			}
			#yema>ul>li:hover>a{
				color: #000000;
			}
			#yema>ul>li>a{
				color: #999999;
				font-size: 14px;
				line-height: 40px;
				text-decoration: none;
			}
			#bottom1{
				width: 1150px;
				height: 100px;
				/* background: paleturquoise; */
				margin: 30px auto 30px auto;
			}
			#bottom1>img{
				width: 560px;
				height: 100px;
				border-radius: 5px;
			}
			.img_left{
				float: left;
				width: 560px;
			}
			.img_right{
				float: right;
				width: 560px;
			}
			#back{
				width: 50px;
				height: 50px;
				border: 1px solid #999999;
				background:#999999;
				position: fixed;
				text-align: center;
				right: 100px;
				top: 380px;
				z-index: 5;
			}
			#back>a{
				text-decoration: none;
				color: white;
				font-size: 30px;
				line-height: 50px;
			}
			#back>a:hover{
				color: #000000;
			}
			#bottom2{
				width: 1150px;
				height: 20px;
				margin: auto;
				/* background: paleturquoise; */
			}
			#bottom2>p{
				float: left;
			}
			#bottom2>a{
				float: right;
				text-decoration: none;
				color: #d36f16;
			}
			#bottom3{
				width: 1150px;
				height: 155px;
				margin: auto;
				/* background: paleturquoise; */
			}
			#bottom3>ul{
				margin-top: 30px;
			}
			#bottom3>ul>li{
				width: 210px;
				height: 155px;
				float: left;
				list-style: none;
				border-radius: 5px;
				overflow: hidden;
				background-color: white;
			}
			#bottom3>ul>li>a>img{
				width: 210px;
				height: 120px;
			}
			#bottom3>ul>li>a{
				text-decoration: none;
				color: #000000;
				font-size: 14px;
			}
			#bottom3>ul>li>a:hover{
				color: #d36f16;
			}
			#foot{
				width: 100%;
				height: 260px;
				background-color: #282828;
			}
			#foot1{
				width: 1150px;
				height: 130px;
				/* background: paleturquoise; */
				margin: auto;
			}
			#foot1>ul>li{
				list-style: none;
				float: left;
				line-height: 130px;
				padding: 10px;
				/* background: palegoldenrod; */
			}
			#foot1>ul>li>a{
				text-decoration: none;
				color: #666666;
				font-size: 14px;
			}
			#foot1>ul>li>a:hover{
				color: #999999;
			}
			
			#foot1>ul>li>a>span>img{
				width: 25px;
				
				/* margin-top: 50px; */
			}
			.foot1_left{
				position: relative;
			}
			.foot1_right{
				float: right;
				/* background: papayawhip; */
				width: 100px;
				height: 130px;
				text-align: center;
				position: relative;
			}
			.foot1_right>div>a>img{
				width: 30px;
			}
			#weixin{
				float: left;
				/* background: palegreen; */
				height:30px;
				width: 50px;
				margin-top: 60px;
			}
			/* .foot1_left:hover>#yidong_ma{
				display: block;
			} */
			/* .foot1_right:hover>#wx_ma{
				display: block;
			} */
			
			#weibo{
				float: left;
				/* background: palegreen; */
				height: 130px;
				width: 50px;
				margin-top: 60px;
			}
			
			#foot2{
				width: 1150px;				height: 120px;
				margin: auto;
				border-top: 1px solid #666666;
				/* background: pink; */
			}
			#foot2>p{
				font-size: 12px;
				float: left;
				color: #666666;
			}
			#foot2>p>img{
				position: relative;
				top: 3px;
				width: 15px;
			}
			#foot2>p>a{
				text-decoration: none;
				color: #666666;
			}
			#foot2>p>a:hover{
				text-decoration: underline;
				color: #999999;
			}
			.foot2_p2{
				margin-top: 15px;
			}
			#yidong_ma{
				width: 110px;
				height: 110px;
				/* background-color: paleturquoise; */
				position: absolute;
				top: -50px;
				left: 0px;
				z-index: 7;
				display: none;
			}	
			#ma2{
				width: 110px;
				height: 110px;
			}
			#ma2>img{
				width: 110px;
				height: 110px;
			}
			
			#wx_ma{
				width: 110px;
				height: 130px;
				/* background-color: paleturquoise; */
				position: absolute;
				top: -70px;
				left: -30px;
				z-index: 7;
				display: none;
				
			}
			#ma{
				width: 110px;
				height: 110px;
			}
			#ma>img{
				width: 110px;
				height: 110px;
			}
			#jiao{
				width:0;
				height:0;
				border-right:10px solid transparent;
				border-left:10px solid transparent;
				border-top:10px solid white;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="back">
			<a href="#head">^</a>
		</div>
		<div id="head">
			<div id="head_main">
				<div id="head_log">
					<a href=""><img src="img/logo.svg" /></a>
				</div>
				<div id="head_nav">
					<ul>
						<li>
							<a href="" style="font-weight: 600;">首页</a>
							<div class="down">
								<a href="#">站酷首页</a>
								<a href="#">wod首页</a>
							</div>
						</li>
						<li>
							<a href="">发现</a>
							<span class="poin"></span>
						</li>
						<li>
							<a href="">职位</a>
							<div class="down">
								<a href="#">职位</a>
								<a href="#">公司</a>
								<a href="#">+发布职位</a>
							</div>
						</li>
						<li>
							<a href="">活动</a>
							<div class="down">
								<a href="#">设计大赛</a>
								<a href="#">专题策划</a>
								<a href="#">线上活动</a>
								<a href="#">线下活动</a>
								<a href="#">学习音频</a>
							</div>
						</li>
						<li>
							<a href="">正版素材</a>
							<div class="down">
								<a href="#">图片</a>
								<a href="#">视频</a>
								<a href="#">字体</a>
								<a href="#">音乐</a>
								<a href="#">创意专题</a>
								<a href="#">我要供图</a>
							</div>
						</li>
						<li>
							<a href="">课程</a>
							<img src="img/sale-vip.svg" id="vip"/>
							<div class="down">
								<a href="#">会员专区</a>
								<a href="#">平面视觉</a>
								<a href="#">绘画插画</a>
								<a href="#">电商设计</a>
								<a href="#">U设计</a>
								<a href="#">摄影艺术</a>
								<a href="#">影视广告</a>
							</div>
						</li>
						<li>
							<a href="">版权保护</a>
							<div class="down">
								<a href="#">著作权登记</a>
								<a href="#">区块链存证</a>
							</div>
						</li>
						<li>
							<a href="" style="font-weight: 1000;">&nbsp;•&nbsp;•&nbsp;•</a>
							<span class="poin"></span>
							<div class="down">
								<a href="#">设计师</a>
								<a href="#">榜单</a>
								<a href="#">站酷APP</a>
								<a href="#">站酷字库</a>
							</div>
						</li>
					</ul>
				</div>	
				<div id="search">
					<a href=""><img src="img/搜索.png" id="search_img"/></a>
				</div>
				<div id="upload">
					<a href=""><img src="img/上传.png" id="upload_img"/></a>
					<div class="down2">
						<a href="#">上传作品</a>
						<a href="#">写文章</a>
						<a href="#">我的创作</a>
					</div>
				</div>
				<div id="login">
					<ul>
						<li>
							<a href="">登录&nbsp;&nbsp;&nbsp;&nbsp;|</a>
						</li>
						<li>
							<a href="">注册</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		<div id="show" class="scroll">
			<ul id="show1">
				<li class="pic">
					<a href="">
						<img src="img/banner1.jpg"/>
					</a>
				</li>
				<li class="pic">
					<a href="">
						<img src="img/banner2.jpg"/>
					</a>
				</li>
				<li class="pic">
					<a href="">
						<img src="img/banner3.png"/>
					</a>
				</li>
				<li class="pic">
					<a href="">
						<img src="img/banner4.jpg"/>
					</a>
				</li>
				<li class="pic">
					<a href="">
						<img src="img/banner5.png"/>
					</a>
				</li>
			</ul>
				<span id="left">&lt</span>
				<span id="right">&gt</span>
		</div>	
		<div id="body1_img">
			<ul>
				<li>
					<a href="">
						<img src="img/body1_img1.jpeg" />
					</a>
				</li>
				<li class="body1_img">
					<a href="">
						<img src="img/body1_img2.jpg" />
					</a>
				</li>
				<li class="body1_img">
					<a href="">
						<img src="img/body1_img3.jpg" />
					</a>
				</li>
				<li class="body1_img">
					<a href="">
						<img src="img/body1_img4.jpg" />
					</a>
				</li>
				<li class="body1_img">
					<a href="">
						<img src="img/body1_img5.jpg" />
					</a>
				</li>
			</ul>
			
		</div>
		
		<div id="body_nav">
			<ul>
				<li><a href="">首页推荐</a></li>
				<li><a href="">我的关注</a></li>
				<li><a href="">全部推荐</a></li>
			</ul>
		</div>
		
		<div id="main">
			<div id="main_img">
			<ul>
				<li>
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon" >
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li>
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li >
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li>
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li >
				<li class="main_img">
					<a href=""><img src="img/main_img1.jpg" /></a>
					<a href="#" class="p1"><p >《天上有一朵云》 插画绘本</p></a>
					<p class="p2">插画-绘本</p>
					<ul class="count1">
						<li><img src="img/眼睛%20(1).png"/><p>4565</p></li>
						<li><img src="img/评论.png"/><p>19</p></li>	
						<li><img src="img/点赞.png"/><p>226</p></li>
					</ul>
					<div class="icon">
						<a href=""><img src="img/001.jpg" /></a>
						<a href="" class="left"><span >鲸羽Flyish</span></a>
						<span class="right">1天前</span>
					</div>	
				</li>	
			</ul>
			</div>
			<div id="yema">
				<ul>
					<li>
						<a href="">1</a>
					</li>
					<li>
						<a href="">2</a>
					</li>
					<li>
						<a href="">3</a>
					</li>
					<li>
						<a href="">4</a>
					</li>
					<li>
						<a href="">5</a>
					</li>
					<li>
						<a href="">6</a>
					</li>
					<li>
						<a href="">7</a>
					</li>
					<li>
						<a href="">...</a>
					</li>
					<li>
						<a href="">99</a>
					</li>
					<li>
						<a href="">100</a>
					</li>
					<li>
						<a href="" style="font-size: 20px;">></a>
					</li>
				</ul>
			</div>
			<div id="bottom1">
				<img  class="img_left" src="img/221.jpg"/>
				<img  class="img_right" src="img/222.jpg"/>
			</div>
			<div id="bottom2">
				<P>推荐课程</P>
				<a href="">换一换</a>
			</div>
			<div id="bottom3">
				<ul>
					<li>
						<a href=""><img src="img/bt1.jpg"/></a>
						<a href=""><p>C4D+AE动态视觉综合提升班</p></a>
					</li>
					<li class="main_img">
						<a href=""><img src="img/bt2.jpg"/></a>
						<a href=""><p>C4D+AE动态视觉综合提升班</p></a>
					</li>
					<li class="main_img">
						<a href=""><img src="img/bt3.jpg"/></a>
						<a href=""><p>C4D+AE动态视觉综合提升班</p></a>
					</li>
					<li class="main_img">
						<a href=""><img src="img/bt4.jpg"/></a>
						<a href=""><p>C4D+AE动态视觉综合提升班</p></a>
					</li>
					<li class="main_img">
						<a href=""><img src="img/bt5.jpg"/></a>
						<a href=""><p>C4D+AE动态视觉综合提升班</p></a>
					</li>
				</ul>
			</div>
		</div>
		<div id="foot">
			<div id="foot1">
				<ul class="foot1_left">
					<div id="yidong_ma">
						<div id="ma2"><img src="img/yidong.png"></div>
						
					</div>
					<li id="yidong"><a href=""><span><img src="img/手机.png" /></span>移动版</a></li>
					<li><a href="">关于我们</a></li>
					<li><a href="">用户协议</a></li>
					<li><a href="">隐私政策</a></li>
					<li><a href="">侵权申诉</a></li>
					<li><a href="">企业服务</a></li>
					<li><a href="">帮助中心</a></li>
					<li><a href="">联系我们</a></li>
					<li><a href="">中文</a></li>
					<li><a href=""> English</a></li>
				</ul>
				
				<div class="foot1_right">
					<div id="wx_ma">
						<div id="ma"><img src="img/weixin.jpg"/></div>
						<div id="jiao"></div>
					</div>
					<div id="weixin"><a href=""><img src="img/微信.png" /></a></div>
					<div id="weibo"><a href=""><img src="img/微博%20(1).png" /></a></div>
				</div>
				
			</div>
			<div id="foot2">
				<p><img src="img/gongan.png" />&nbsp;<a href="">京公网安备 11010502000501号</a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href=""> 广播电视节目制作经营许可证（京）字第06990号 </a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href=""> 京ICP备11017824号 </a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href=""> 京ICP证130164号  </a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href=""> 人力资源服务许可证</a></p>
				<p class="foot2_p2"><a href="">营业执照 </a>&nbsp;&nbsp; | &nbsp;&nbsp;<a href=""> 网上有害信息举报专区 </a>&nbsp;&nbsp; | &nbsp;&nbsp; 不良信息举报电话：010-56538658 &nbsp;&nbsp; | &nbsp;&nbsp;举报邮箱 jubao@zcool.com.cn &nbsp;&nbsp; | &nbsp;&nbsp; 联系电话：010-56538600&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Copyright © 2006-2021&nbsp;<a href=""> ZCOOL站酷</a></p>
			</div>
		</div>
		
		<script>
			var pic = document.getElementsByClassName("pic");
			var show = document.getElementById("show");
			var show1 = document.getElementById("show1");
			var Left = document.getElementById("left");
			var Right = document.getElementById("right");
			var i = 0;
			var time = setInterval(function () {
				i++;
				if (i == 5) {
					i = 0;
				}
				show1.style.marginLeft = -1150 * i + "px";
			}, 2000)
	
			show.onmouseover = function () {
				clearInterval(time);
			}
			show.onmouseout = function () {
				time = setInterval(function () {
					i++;
					if (i == 5) {
						i = 0;
					}
					show1.style.marginLeft = -1150 * i + "px";
				}, 2000)
			}
			Left.onclick = function () {
				i--;
				if (i == -1) {
					i = 4;
				}
				show1.style.marginLeft = -1150 * i + "px";
			}
			Right.onclick = function () {
				i++;
				if (i == 5) {
					i = 0;
				}
				show1.style.marginLeft = -1150 * i + "px";
			}
			
			
			//二维码显示隐藏
			var yidong_ma = document.getElementById("yidong_ma");
			var yidong = document.getElementById("yidong");
			yidong.onmouseover = function(){
				yidong_ma.style.display = "block";
			};
			yidong.onmouseout = function(){
				yidong_ma.style.display = "none";
			};
			
			var wx_ma = document.getElementById("wx_ma");
			var weixin = document.getElementById("weixin");
			weixin.onmouseover = function(){
				wx_ma.style.display = "block";
			};
			weixin.onmouseout = function(){
				wx_ma.style.display = "none";
			};
			
			var search = document.getElementById("search");
			var search_img = document.getElementById("search_img");
			search.onmouseover = function(){
				search_img.src = "img/搜索 (1).png";
			}
			search.onmouseout = function(){
				search_img.src = "img/搜索.png";
			}
			var upload = document.getElementById("upload");
			var upload_img = document.getElementById("upload_img");
			upload.onmouseover = function(){
				upload_img.src = "img/上传 (1).png";
			}
			upload.onmouseout = function(){
				upload_img.src = "img/上传.png";
			}

		</script>
	</body>
	
</html>
